<template>
  <view class="car-page">
    <view class="car-section">
      <template v-if="cars.length > 0">
        <view class="car-card" v-for="(car, i) in cars" :key="car.id">
          <view class="car-card-main">
            <image class="car-img" :src="car.img" mode="aspectFill"></image>
            <view class="car-info">
              <view class="car-info-row">车型：{{ car.model }}</view>
              <view class="car-info-row">车牌：{{ car.plate }}</view>
            </view>
          </view>
          <view class="car-card-footer">
            <view class="car-card-footer-divider"></view>
            <view class="car-radio-wrap">
              <text
                :class="['car-radio', { checked: car.default }]"
                @click="setDefault(i)"
              >
                <text v-if="car.default" class="car-radio-icon">✔</text>
              </text>
              <text class="car-radio-label">设为默认车辆</text>
            </view>
            <text class="car-delete" @click="deleteCar(i)">删除</text>
          </view>
          <view class="car-card-divider"></view>
        </view>
      </template>
      <template v-else>
        <view class="car-empty-box">
          <image class="car-empty-img" src="/static/car1.png" mode="widthFix"></image>
          <view class="car-empty-text">暂无车辆信息</view>
        </view>
      </template>
    </view>
    <view class="car-add-btn-bar">
      <button class="car-add-btn" @click="goAddCar">＋ 添加车辆</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import baseUrl from '@/untils/urlConfig';
import unirequest from '@/untils/unirequest';

// ** 临时模拟本地存储结束 **
// 获取当前登录用户ID
// const getCurrentUserId = () => {
//   const userInfo = uni.getStorageSync('userInfo');
//   if (!userInfo) {
//     uni.showToast({
//       title: '请先登录',
//       icon: 'none'
//     });
//     // 跳转到登录页面
//     setTimeout(() => {
//       uni.navigateTo({
//         url: '/pages/login/login'
//       });
//     }, 1500);
//     return null;
//   }
//   return userInfo.userId;
// };

// 响应式数据：车辆列表（使用 ref 包裹数组）
const cars = ref([]); // 将静态数据清空，准备存放后端数据

// 获取车辆数据的方法
const fetchCars = async () => {
  // const userId = getCurrentUserId();
  // if (!userId) return; // 如果没有获取到用户ID，则不发送请求

  try {
    // 这里替换为实际的API请求
    const response = await unirequest({
      url: baseUrl+'/chy/usercarinfo/list', // 后端接口地址
      method: 'GET',
      // data: { // 传递userId
      //   userId: userId
      // },
    });

    // 检查响应状态码和业务状态码
    if (response.statusCode === 200 && response.data && response.data.code === 200) {
      // 假设后端返回的数据列表在 response.data.rows 中
      // 注意：后端返回的字段可能是 type, carNum, defaults, id, uid 等
      // 需要将这些字段映射到模板期望的 model, plate, default
      let fetchedCars = response.data.rows.map(car => ({
        id: car.id,
        uid: car.uid,
        model: car.type, // 将 type 映射到 model
        plate: car.carNum, // 将 carNum 映射到 plate
        default: car.defaults === 1, // 将 defaults (1/0) 映射到 boolean default
        img: car.img || '/static/car1.png' // 使用后端img字段，如果不存在则用默认图片
      })) || [];

      // 从本地存储读取默认车辆ID
      const storedDefaultCarId = uni.getStorageSync('defaultCarId');

      // 如果本地存储有默认车辆ID，则覆盖后端返回的默认状态
      if (storedDefaultCarId) {
        fetchedCars = fetchedCars.map(car => ({
          ...car,
          default: car.id === storedDefaultCarId
        }));
      }

      cars.value = fetchedCars; // 更新车辆列表
      uni.showToast({
        title: '获取车辆数据成功',
        icon: 'success'
      });
    } else {
      // 处理后端返回的错误
      const errorMessage = response.data && response.data.msg ? response.data.msg : '获取车辆数据失败';
      uni.showToast({
        title: errorMessage,
        icon: 'none'
      });
      console.error('获取车辆数据失败:', response);
    }

  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({
      title: '网络请求失败',
      icon: 'none'
    });
  }
};

// 页面加载时获取数据
onMounted(() => {
  fetchCars(); // 调用fetchCars获取后端数据
});

// 设置默认车辆
const setDefault = async (idx) => {
  // const userId = getCurrentUserId();
  // if (!userId) return; // 如果没有获取到用户ID，则不发送请求

  try {
    // 这里替换为实际的API请求
    // await uni.request({
    //   url: baseUrl + '/chy/usercarinfo/setDefault', // 假设设置默认车辆的接口是这个
    //   method: 'POST', // 或者PUT，根据后端定义
    //   data: {
    //     carId: cars.value[idx].id,
    //     // userId: userId // 根据后端接口是否需要传递用户ID，如果request函数内部已处理则不需要
    //   },
    //   // header: { // 携带token进行身份验证，由request函数处理
    //   //  // 'Authorization': `Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6Ijk5NGFjMjE5LTU4NDYtNGJlZC1hYjE3LTYxN2Y5NTc4YzljOSIsInVzZXJuYWxlIjoiYWRtaW4ifQ.-BWdttSteWGeVtKkkUwRRHxD2U1CIweNxIuMkCJvnzmwzh0oIuzy7vKlrwfN9r8YT76jYZUQroLT_l8BWDA9WA}`
    //   // }
    // });

    // 如果请求成功，更新本地数据，将当前车辆设为默认，其他设为非默认
    cars.value = cars.value.map((car, i) => ({
      ...car,
      default: i === idx
    }));

    // 将当前选择的默认车辆ID存入本地存储
    uni.setStorageSync('defaultCarId', cars.value[idx].id);

    uni.showToast({
        title: '设置默认车辆成功',
        icon: 'success'
      });
  } catch (error) {
    console.error('设置默认车辆失败:', error);
    uni.showToast({
      title: '设置默认车辆失败', // 前端操作失败通常是代码逻辑错误
      icon: 'none'
    });
  }
};

// 删除车辆
const deleteCar = async (idx) => {
  // const userId = getCurrentUserId();
  // if (!userId) return; // 如果没有获取到用户ID，则不发送请求

  try {
    // 这里替换为实际的API请求
    await unirequest({
      url: baseUrl + '/chy/usercarinfo/' + cars.value[idx].id,
      method: 'DELETE', // 或者DELETE，根据后端定义
      data: {
        // carId: cars.value[idx].id, // DELETE 请求通常通过 URL 传递 ID，data 中不需要
        // userId: userId // 根据后端接口是否需要
      }
    });

    // 如果请求成功，更新本地数据
    cars.value = cars.value.filter((_, i) => i !== idx);
    uni.showToast({
        title: '删除车辆成功',
        icon: 'success'
      });
  } catch (error) {
    console.error('删除车辆失败:', error);
    uni.showToast({
      title: '删除车辆失败',
      icon: 'none'
    });
  }
};

// 跳转至添加车辆页面
const goAddCar = () => {
  uni.navigateTo({ url: '/pages/car/add-car' });
};
</script>

<style>
.car-page {
  background: #f7f7f7;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.car-section {
  margin: 32rpx 0 0 0;
  padding: 0 0 0 0;
}
.car-card {
  background: #fff;
  border-radius: 28px;
  margin: 0 24rpx 32rpx 24rpx;
  box-shadow: 0 8rpx 32rpx rgba(35,138,255,0.10);
  overflow: hidden;
}
.car-card-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 36rpx 36rpx 0 36rpx;
}
.car-img {
  width: 140rpx;
  height: 140rpx;
  border-radius: 20rpx;
  background: #f7f7f7;
}
.car-info {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.car-info-row {
  font-size: 32rpx;
  color: #222;
  margin-bottom: 18rpx;
  text-align: left;
}
.car-card-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 56rpx 36rpx 28rpx 36rpx;
  position: relative;
}
.car-card-footer-divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 24rpx;
  height: 2rpx;
  background: #f2f2f2;
  border-radius: 2rpx;
}
.car-radio-wrap {
  display: flex;
  align-items: center;
}
.car-radio {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  border: 3rpx solid #ccc;
  margin-right: 12rpx;
  background: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}
.car-radio.checked {
  border-color: #ff4d4f;
  background: #ff4d4f;
}
.car-radio-icon {
  color: #fff;
  font-size: 30rpx;
}
.car-radio-label {
  font-size: 30rpx;
  color: #888;
}
.car-delete {
  color: #888;
  font-size: 30rpx;
  margin-left: 32rpx;
  text-align: right;
}
.car-card-divider {
  height: 2rpx;
  background: #f2f2f2;
  margin: 0 36rpx;
  border-radius: 2rpx;
}
.car-add-btn-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 32rpx;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.car-add-btn {
  background: #238aff;
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
  border-radius: 50rpx;
  padding: 2rpx 0;
  width: 82vw;
  border: none;
  box-shadow: 0 2rpx 8rpx rgba(35,138,255,0.10);
}
.car-empty-box {
  background: #fff;
  border-radius: 32rpx;
  margin: 40rpx 16rpx 0 16rpx;
  padding: 120rpx 0 120rpx 0;
  box-shadow: 0 8rpx 32rpx rgba(35,138,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.car-empty-img {
  width: 220rpx;
  opacity: 0.25;
  margin-bottom: 32rpx;
  }
  
  .car-empty-text {
	color: #bbb;
	font-size: 30rpx;
	margin-top: 12rpx;
	}
</style>